// @media (max-width: 575px) { }
@media screen and (max-width: 768px) and (min-width: 0px){
    /*媒体查询是用来设置样式的 当实际的屏幕大小满足条件时就执行样式 */
    .work-table-detail {
        width: calc(100% - 150px) !important;
    }
    .ant-form-item-label {
        flex: 0 !important;
    }
    .ant-form-item-control {
        max-width: 250px !important;
    }
}

// /* w  768~992    blue */
@media screen and (min-width: 768px) and (max-width: 992px){
    .work-table-detail {
        width: calc(100% - 200px) !important;
    }
}
// /*  w  992~1200  pink*/
@media screen and (min-width: 992px) and (max-width: 1200px){
    .work-table-detail {
        width: calc(100% - 200px) !important;
    }
}
// /*W  >1200:     purple*/
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .work-table-detail {
        width: calc(100% - 380px) !important;
    }
}


/* 在分辨率大于 1024px 时应用的样式 */
@media (min-width: 1600px) {
    .work-table-detail {
        width: calc(100% - 760px) !important;
    }
}

.work-detail-drawer {
    overflow: auto;
    height: 100%;
}
.work-table-detail {
    top: 0;
    height: 100%;
    // width: 1000;
    .ant-drawer-body {
        padding: 0;
        overflow: hidden;
    }

    

    .work-detail {
        height: 100%;
        min-width: 685px;
        .ant-form-item-label {
            min-width: 100px;
        }
        // overflow: auto;
        // -ms-overflow-style: none;
        // overflow: -moz-scrollbars-none;
    }
}


.work-detail {
    height: 100%;
    flex: 1;
    position: relative;
    flex-direction: column;
    // overflow: hidden;
    display: flex;

    .ant-form-item {
        margin-bottom: 10px;
        flex-wrap: nowrap;
    }

    .work-detail-parent-title {
        font-size: 14px;
        font-weight: 600;
        color: #999;
        cursor: pointer;
        margin-right: 5px;
    }

    .work-detail-crumb-col {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10 15px;
    }
    .work-detail-crumb {
        display: flex;
        line-height: 30px;
        color: #999;

        .work-detail-crumb-item {
            display: inline-flex;
            align-items: center;
            // margin-right: 5px;
            .work-detail-crumb-icon:hover{
                color: var(--tiklab-blue);
                // text-decoration: underline;
                cursor: pointer;
            }
        }
        .work-detail-crumb-item:hover {
            cursor: pointer;
        }

    }
    .work-detail-close:hover {
        cursor: pointer;
    }

    .work-detail-top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10px;
        padding: 0 15px;
        overflow: hidden;
        .edit-status-modal {
            .ant-modal-body {
                padding: var(--tiklab-padding);
            }
            
        }
        .work-item-title-top {
            display: flex;
            align-items: center;

            .work-detail-tab-botton {
                display: flex;
                justify-content: flex-end;
                align-items: center;


                .work-botton {
                    text-align: center;
                    padding: 5px 10px;
                    border-radius: 2px;

                    .icon {
                        margin-right: 5px;
                    }
                }

                .botton-background {
                    border: 0;
                    background: transparent;
                }

                .botton-background:hover {
                    background-color: #ECEDF0;
                }

                .more {
                    text-align: right;
                    margin-left: 10px;
                }
            }
        }

        .work-item-title-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;
        }

        .work-detail-top-name {
            flex: 1;

            .work-item-title:focus-visible {
                outline: 0;
                border: 2px solid var(--tiklab-blue);
                min-width: 100px;
                border-radius: 2px;
                padding: 0 10px;
                background-color: transparent;
            }

            .work-item-title:hover {
                background-color: var(--tiklab-gray-400);
            }

            .work-item-title:focus {
                background-color: #fff;
            }

            .work-item-title-focus {
                background-color: #fff;
                border: 1px solid var(--tiklab-blue);
                padding: 0 20px 0 10px;
            }

            .work-item-title {
                outline: 0;
                box-shadow: none;
                flex: 1;
                height: 35px;
                line-height: 35px;
                border-radius: 2px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                font-weight: 600;
                margin-right: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .work-item-title-left {
                    outline: 0;
                }

                .work-item-title-right {
                    display: flex;
                    gap: 20px;
                    font-size: 12px;
                    align-items: center;

                    .title-change-true {
                        background: var(--tiklab-blue);
                        color: #fff;
                        height: 20px;
                        line-height: 20px;
                        padding: 0 5px;
                        cursor: pointer;
                        border-radius: 4px;

                        .svg-icon {
                            width: 12px;
                            height: 12px;
                        }
                    }

                    .title-change-cancel {
                        background: #f7f7f7;
                        height: 20px;
                        line-height: 20px;
                        padding: 0 5px;
                        cursor: pointer;
                        border-radius: 4px;
                    }
                }
            }

            .work-item-info {
                display: flex;
                align-items: flex-start;
                font-size: 14px;
                gap: 20px;
                .work-item-info-item {
                    height: 25px;
                    line-height: 25px;
                    display: flex;
                    .ant-input-number {
                        border: 0;
                        background-color: transparent;
                    }
                    .work-item-info-label {
                        font-weight: 600;
                        color: #909aaa;
                        margin-right: 10px;
                    }
                    .work-item-info-value {
                        background: #fafafa;
                        height: 25px;
                        line-height: 25px;
                        display: block;
                        padding: 0 10px;
                        border-radius: 5px;
                        min-width: 70px;
                        
                        input {
                            outline: none;
                            border: 0;
                            background: #fafafa;
                            height: 25px;
                            line-height: 25px;
                            min-width: 20px;
                            max-width: 50px;
                        }
                    }
                    .select-view {
                        background: #fafafa;
                        padding: 0 10px;
                        border-radius: 5px;
                        width: 70px;
                    }
                }

                .work-item-info-title {
                    margin-right: 10px;
                    color: #999;
                    font-size: 13px;
                }

                .ant-select-selector {
                    border: 0;
                }

                .tiklab-profile {
                    .ant-avatar {
                        width: 16px !important;
                        height: 16px !important;
                    }
                }
            }
            .page-simple {
                display: flex;
                align-items: center;
                gap: 5px;
            }
        }
        .delete-button-group {
            display: flex;
            padding: 20px 0;
            justify-content: flex-end;
            gap: 10px;
        }

    }

    .other-title {
        font-weight: var(--tiklab-font-weight-bold);
        margin-bottom: 5px;
        font-size: 13px;
    }

    // .work-detail-tab {
    //     flex: 1;
    //     height: calc(100% - 85px);
    //     // overflow: auto;
    // }
}

.work-flow-transition {
    // width: 120px;
    background-color: #fff;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);

    .work-flow-item {
        padding: 10px 15px;
        cursor: pointer;
        white-space: nowrap;
        .work-flow-text {
            padding: 3px;
            font-size: 12px;
            border-radius: 2px;
            background: #f0f0f0;
            font-weight: 600;
        }
    }

    .work-flow-item:hover {
        background-color: var(--tiklab-gray-400);
    }

    .work-flow-view {
        padding: 10px 15px;
        cursor: pointer;
        border-top: 1px solid #f0f0f0;
    }

    .work-flow-view:hover {
        color: var(--tiklab-blue);
    }

}

.img-cursor {
    z-index: 2000;
}
